<template>
    <div v-loading="loading">
        <div @click="$router.go(-1)" style="display: flex;align-items: center;cursor: pointer;margin-bottom: 20px;">
            <i class="el-icon-arrow-left" style="font-size: 20px;color: #409eff;"></i>
             <div style="color: #409eff;">返回</div>
        </div>
        <template>
            <el-descriptions :column="3" border class="margin-top" title="密聊详情">


                <el-descriptions-item>
                    <template slot="label">发布人</template>
                    <!-- <div v-if="datas.user_info_more" style="display: flex;align-items: center;">
                        <el-avatar size="medium" :src="datas.user_info_more.avatar" style="margin-right: 10px;"></el-avatar>
                        {{ datas.user_info_more.name }}
                    </div>-->

                    <UserInfo :user_id="datas.user_id" :userInfos="datas.author" v-if="datas.user_id"></UserInfo>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">ID</template>
                    {{ datas.secret_id }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">对方ID</template>
                    {{ datas.object_id }}
                    <!-- <UserInfo :user_id="datas.object_id" v-if="datas.object_id"></UserInfo> -->
                </el-descriptions-item>

                <!-- <el-descriptions-item>
                    <template slot="label">密聊传图</template>
                        <el-image class="border" style="width: 100px; height: 100px" fit="cover" :src="datas.images[0]" :preview-src-list="datas.images">
                          </el-image>
    
                </el-descriptions-item> -->
                <el-descriptions-item>
                    <template slot="label">密聊标题</template>
                    {{ datas.desc }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">省</template>
                    {{ datas.province }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">市</template>
                    {{ datas.city }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">区</template>
                    {{ datas.area }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">开始时间</template>
                    {{ datas.start_time }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">结束时间</template>
                    {{ datas.end_time }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">星期</template>
                    <el-tag v-for="(item, index) in datas.week" :key="index" style="margin-right: 10px;">
                        {{ item == 1 ? "星期一" : '' }}
                        {{ item == 2 ? "星期二" : '' }}
                        {{ item == 3 ? "星期三" : '' }}
                        {{ item == 4 ? "星期四" : '' }}
                        {{ item == 5 ? "星期五" : '' }}
                        {{ item == 6 ? "星期六" : '' }}
                        {{ item == 7 ? "星期天" : '' }}
                    </el-tag>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">订单号</template>
                    {{ datas.trade_no }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">标签</template>
                    <el-tag type="success" style="margin-right: 10px;" v-for="(item, index) in datas.labels" :key="index">
                        {{
                            item }} </el-tag>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">审核状态</template>
                    <el-tag type="warning" v-if="datas.verify_status == 0">待审核</el-tag>
                    <el-tag type="success" v-else-if="datas.verify_status == 1">已通过</el-tag>
                    <el-tag type="danger" v-else-if="datas.verify_status == 2">已拒绝</el-tag>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">私人定制类型</template>
                    <el-tag type="warning" v-if="datas.customized_type == 0">无效</el-tag>
                    <el-tag type="success" v-else-if="datas.customized_type == 1">线上1v1</el-tag>
                    <el-tag type="danger" v-else-if="datas.customized_type == 2">线下同城</el-tag>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">商品状态</template>
                    <el-tag type="warning" v-if="datas.status == 0">待付款</el-tag>
                    <el-tag type="success" v-else-if="datas.status == 1">上架</el-tag>
                    <el-tag type="danger" v-else-if="datas.status == 2">下架</el-tag>
                    <el-tag type="danger" v-else-if="datas.status == 3">进行中</el-tag>
                    <el-tag type="danger" v-else-if="datas.status == 4">已完成</el-tag>
                    <el-tag type="danger" v-else-if="datas.status == 5">取消</el-tag>
                    <el-tag type="danger" v-else-if="datas.status == 6">拒绝</el-tag>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">经度</template>
                    {{ datas.longitude }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">纬度</template>
                    {{ datas.latitude }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">mac地址</template>
                    {{ datas.mac }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">用户IP</template>
                    {{ datas.ip }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">ip详细地址</template>
                    {{ datas.ip_address }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">终端机型</template>
                    {{ datas.model }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">终端号码</template>
                    {{ datas.terminal }}
                </el-descriptions-item>



                <el-descriptions-item>
                    <template slot="label">浏览次数</template>
                    {{ datas.viewed }}
                </el-descriptions-item>



                <el-descriptions-item>
                    <template slot="label">添加时间</template>
                    {{ datas.created_at }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">修改时间</template>
                    {{ datas.updated_at }}
                </el-descriptions-item>

                <!-- <el-descriptions-item>
                    <template slot="label">结束时间</template>
                    {{ datas.finished_at }}
                </el-descriptions-item> -->


                <el-descriptions-item>
                    <template slot="label">取消时间</template>
                    {{ datas.cancel_at }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">删除时间</template>
                    {{ datas.deleted_at }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">操作</template>
                    <el-popconfirm @confirm="reasonShowFun(datas.secret_id)" title="这是确定要下架这个订单吗？" v-if="datas.status == 1 || datas.status == 3">
                        <el-button size="mini" slot="reference" style="padding: 10px;margin-left: 10px;"
                            type="danger">下架</el-button>
                    </el-popconfirm>
                </el-descriptions-item>
            </el-descriptions>
            <div class="flex align-center jus-flex-start mt-20 pr-30">
                <div v-show="datas.verify_status == 0">
                    <el-popconfirm @confirm="passFun(datas.secret_id, 1)" title="确定要通过吗？">
                        <el-button slot="reference" type="primary" style="padding: 10px 30px"
                            v-permission="['ADMIN', 'WITHDRAW_DETAILS_PASS']">通过</el-button>
                    </el-popconfirm>
                    <el-popconfirm @confirm="passFun(datas.secret_id, 2)" title="确定要拒绝吗？">
                        <el-button size="mini" slot="reference" type="danger" style="padding: 10px 30px"
                            v-permission="['ADMIN', 'WITHDRAW_DETAILS_REJECT']">拒绝</el-button>
                    </el-popconfirm>
                </div>
                <div v-show="datas.verify_status != 0">
                    <el-tag type="warning" v-if="datas.verify_status == 0">待审核</el-tag>
                    <el-tag type="success" v-else-if="datas.verify_status == 1">已通过</el-tag>
                    <el-tag type="danger" v-else-if="datas.verify_status == 2">已拒绝</el-tag>
                </div>
            </div>
        </template>

        <!-- 图片 -->
        <div v-if="datas.images">
            <div style="margin-top: 30px;margin-bottom:20px;font-weight: 700;">
                图片
            </div>
            <el-card style="margin-bottom: 30px;">
                <div class="flexFS">
                    <div v-for="(item, index) in datas.images" :key="index" style="margin-bottom: 30px;margin-right: 30px;">

                        <el-image class="border" style="width: 150px; height: 150px" :src="item" fit="cover"
                            :preview-src-list="datas.images">
                        </el-image>

                    </div>
                </div>
            </el-card>
        </div>


        <!-- 套餐 -->
        <div v-if="datas.images">
            <div style="margin-top: 30px;margin-bottom:20px;font-weight: 700;">
                套餐
            </div>
            <el-card style="margin-bottom: 30px;">
                <div class="flexFS">
                    <div v-for="(item, index) in datas.package" :key="index"
                        style="margin-bottom: 30px;margin-right: 30px;">
                        <el-card>
                            <div>价格：{{ item.price }}</div>
                            <div style="margin: 30px 0;">时间：{{ item.time }}</div>
                            <div>描述：{{ item.desc }}</div>

                        </el-card>
                    </div>
                </div>
            </el-card>
        </div>

        <!-- 下架订单 -->
        <el-dialog :visible.sync="reasonShow" title="下架订单" width="800px">
            <el-form :model="reasonForm">
                <el-form-item label="下架原因">
                    <el-input placeholder="请输入下架原因" style="width: 500px" v-model="reasonForm.reason"
                        type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="reasonShow = false">取 消</el-button>
                <el-button @click="disableFun(2)" :loading="submitComplete" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
      
<script>
export default {
    data() {
        return {
            submitComplete: false,
            visible: false,
            loading: false,
            tabdata: [],
            datas: {},
            reasonShow: false,
            reasonForm: {
                status: '',
                reason: '',  //理由
            },
            secret_id: "",
        }
    },
    mounted() {
        //this.getworksList()
        if (this.$route.query.id) {
            console.log('this.$route.query.id', this.$route.query.id)
            this.getWithdrawInfo(this.$route.query.id)
        }

    },
    methods: {
        passFun(id, status) {
            let that = this
            this.$request.put('/secret/update_examine', { secret_id: id, verify_status: status }).then((res) => {
                this.$message.success('操作成功')
                that.getWithdrawInfo(id)
            })
        },
        reasonShowFun(id) {
            this.secret_id = id
            this.reasonShow = true
        },
        initReasonForm() {
            this.reasonForm = {
                status: '',
                reason: '',  //理由
            }
        },
          //下架
          disableFun(status) {
            if (this.submitComplete) return
            this.submitComplete = true
            this.reasonForm.status = 2
            let that = this
            this.$request.put('/secret/update_status/' + that.secret_id, that.reasonForm).then((res) => {
                this.$message.success('操作成功')
                this.submitComplete = false
                that.reasonShow = false
                that.initReasonForm()
                this.getWithdrawInfo(this.$route.query.id) //重新请求数据
            }).catch((error) => {
                this.submitComplete = false
            });
        },

        getWithdrawInfo(id) {
            let that = this
            this.$request.get('/secret/get/' + id).then((res) => {
                that.tabdata = []
                that.datas = res

                console.log('res', res)
                that.tabdata.push(res)
            })
        },
    },
}
</script>
      
<style lang="scss" scoped>
.el-button--text {
    margin-right: 20px !important;
}

.el-popover {
    width: 250px;
}

.flexFS {
    display: flex;
    justify-content: flex-start;
}
</style>